<template>
  <div class="loginFormBox">
    <h1 class="loginTitle">账号密码登录</h1>
    <van-form @submit="onSubmit">
      <van-field
        v-model.trim="loginForm.username"
        clearable
        name="username"
        label=""
        placeholder="请输入学工号"
        class="mr-l"
        :rules="[{ required: true }]"
      />
      <van-field
        v-model.trim="loginForm.password"
        type="password"
        name="password"
        label=""
        clearable
        class="mr-l"
        placeholder="请输入密码"
        :rules="[{ required: true}]"
      />
      <div class="buttonSubBox">
        <van-button round block type="info" native-type="submit" class="buttonSub">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { userLogin } from '@/api/login'
import { RSAjsc } from '@/utils'
import { setToken } from '@/utils/auth'

export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async onSubmit(values) {
      try {
        const res = await userLogin({
          ...values,
          password: RSAjsc(values.password)
        })
        await setToken(res.data.token)
        await this.$router.push('/home')
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.loginFormBox{
  @include wh(100%,100vh);
  padding-top: 80px;
  background-color: #fff;
  .buttonSubBox{
    @include wh(335px,44px);
    margin-top: 54px;
    margin-left: 20px;
    .buttonSub{
      background-color: #3F86F6;
      font-size: 17px;
    }
  }
  .mr-l{
    margin-left: 5px;
  }
  ::v-deep .van-form{
    width: 95%;
  }
  .loginTitle{
    padding-left: 20px;
    margin-bottom: 60px;
    font-size: 22px;
    font-weight: 700;
    color: #000000;
    letter-spacing: -0.44px;
  }
}
</style>
